import { FC, Fragment } from "react";
import classNames from "classnames";

import Gap from "./Gap";
import Item from "./Item";
import { useTodoListStore } from "./Store";
import { useTransition, animated } from "@react-spring/web";

interface ListProps {
    className?: string | string[];
}

export const List: FC<ListProps> = (props) => {
    const cs = classNames(
        "h-full",
        props.className
    );

    const list = useTodoListStore(state => state.list);
    // 当传入的list发生变化就会依次触发 from到leave的动画
    const transitions = useTransition(list, {
        from: { transform: 'translate3d(100%,0,0)', opacity: 0 },
        enter: { transform: 'translate3d(0%,0,0)', opacity: 1 },
        leave: { transform: 'translate3d(-100%,0,0)', opacity: 0 },
        keys: list.map(item => item.id)
    });

    return <div className={cs}>
        {
            // list.length ? list.map(item => {
            //     // <Fragment> 也可以写 <></>，它只是用来给多个 children 包一层，但不会生成 dom 节点,
            //     // 与空标签的区别在于其可以加 key属性
            //     return <Fragment key={item.id}>
            //         <Gap id={item.id} />
            //         <Item data={item} />
            //     </Fragment>
            // }) : <>暂无代办事项<Gap /></>
            // 加入动画效果
            list.length ? transitions((style, item) => {
                return <animated.div style={style}>
                    <Gap id={item.id} />
                    <Item data={item} />
                </animated.div>
            }) : '暂无待办事项'
        }
        <Gap />
    </div>
}



